<template>
  <div id="editform">
    <commonformdialog
      :isshowDialogs="isshowDialog"
      :dialogTitle="'编辑驾校信息'"
      @closetextDialog="closeDialog"
      @confirmbtn="confirmbtn"
      :dialogWidth="'700px'"
      :topHeight="'5vh'"
    >
      <div class="formarea">
        <el-form
          ref="editform"
          :model="formData"
          :rules="rules"
          size="medium"
          label-width="100px"
        >
          <el-form-item label="驾校名称" prop="short_title">
            <el-input
              v-model="formData.short_title"
              placeholder="请输入驾校名称"
              readonly
              :disabled="true"
              clearable
              :style="{ width: '100%' }"
            ></el-input>
          </el-form-item>
          <el-form-item label="驾校封面" prop="head_img">
            <uploadimg
              :imgModel="formData.head_img"
              @uploadimgok="head_imgok"
              @deleteimg="head_imgdel"
              :isdeleteicon="false"
            >
              <span slot="text">
                支持上传不大于10M的JPEG、JPG、PNG、BMP图片
              </span>
            </uploadimg>
          </el-form-item>
          <el-form-item label="地址" prop="address">
            <el-input
              placeholder="请点击右边选择地图来选择地址"
              :disabled="true"
              v-model="formData.address"
            >
              <template slot="append">
                <el-button @click="selectmap">选择地图</el-button>
              </template>
            </el-input>
          </el-form-item>
          <mapDialog
            v-if="isshowmap"
            :isshowmapDialog="isshowmap"
            @closemap="closemap"
            :userSelectinfo="selectmapinfo"
            :isshowfooter='false'
          ></mapDialog>
          <el-form-item label="驾校简介" prop="description">
            <el-input
              v-model="formData.description"
              type="textarea"
              placeholder="请输入驾校简介"
              :autosize="{ minRows: 4, maxRows: 4 }"
              :style="{ width: '100%' }"
            ></el-input>
          </el-form-item>
          <el-form-item label="驾校车辆" prop="have_cars">
            <el-input
              class="carnum"
              v-model="formData.have_cars"
              placeholder="请输入驾校车辆"
              clearable
              :style="{ width: '100%' }"
            >
              <template slot="append">辆</template>
            </el-input>
          </el-form-item>
          <el-form-item label="基础设施" prop="facilities">
            <el-checkbox-group v-model="formData.facilities" size="medium">
              <el-checkbox
                v-for="(item, index) in facilitiesOption"
                :key="index"
                :label="item.id"
                :disabled="item.disabled"
              >
                {{ item.title }}
              </el-checkbox>
            </el-checkbox-group>
          </el-form-item>
          <el-form-item label="考试资质" prop="qualifications">
            <el-checkbox-group v-model="formData.qualifications" size="medium">
              <el-checkbox
                v-for="(item, index) in qualificationsOption"
                :key="index"
                :label="item.id"
                :disabled="item.disabled"
              >
                {{ item.title }}
              </el-checkbox>
            </el-checkbox-group>
          </el-form-item>
          <el-form-item label="附加服务" prop="service">
            <el-checkbox-group v-model="formData.service" size="medium">
              <el-checkbox
                v-for="(item, index) in serviceOption"
                :key="index"
                :label="item.id"
                :disabled="item.disabled"
              >
                {{ item.title }}
              </el-checkbox>
            </el-checkbox-group>
          </el-form-item>
        </el-form>
      </div>
    </commonformdialog>
  </div>
</template>

<script>
import commonformdialog from '@/components/commondialog/commondialog'
//引入图片上传组件
import uploadimg from '@/components/uploadimg/uploadimg'
//地图弹窗组件
import mapDialog from '@/components/selectmap/selectmap'
//api
import { getBaseInfo, editbaseInfo } from '@/api/school'
import { getSessionStorage } from '@/utils/accessToken'
export default {
  data() {
    return {
      //用户选择的地图
      selectmapinfo: {},
      //是否显示地图
      isshowmap: false,
      formData: {
        short_title: '',
        head_img: '',
        address: '',
        lat: '',
        lng: '',
        description: '',
        have_cars: '',
        facilities: [],
        qualifications: [],
        service: [],
      },
      rules: {
        short_title: [
          {
            required: true,
            message: '请输入驾校名称',
            trigger: 'blur',
          },
        ],
        head_img: [
          {
            required: true,
            message: '请上传驾校封面',
            trigger: 'blur',
          },
        ],
        address: [
          {
            required: false,
            message: '请输入驾校地址',
            trigger: 'blur',
          },
        ],
        description: [
          {
            required: true,
            message: '请输入驾校简介',
            trigger: 'blur',
          },
        ],
        have_cars: [],
        facilities: [],
        qualifications: [],
        service: [],
      },
      facilitiesOption: [
        {
          label: '免费WIFI',
          value: 1,
        },
        {
          label: '商店',
          value: 2,
        },
        {
          label: '餐厅',
          value: 3,
        },
        {
          label: '咖啡厅',
          value: 4,
        },
        {
          label: '休息区',
          value: 5,
        },
      ],
      qualificationsOption: [
        {
          label: '科三科四同天考试',
          value: 1,
        },
      ],
      serviceOption: [
        {
          label: '分期付款',
          value: 1,
        },
      ],
    }
  },
  props: {
    //是否显示弹窗
    isshowDialog: {
      type: Boolean,
      default: false,
    },
  },
  methods: {
    //获取基础信息
    async getBaseInfoData() {
      let data = await getBaseInfo()
      if ((data.code = '0000')) {

        let {
          short_title,
          head_img,
          address,
          lat,
          lng,
          description
        } = data.data
         let schoolBase = data.data.schoolBase
        if(schoolBase){
          var  have_cars = schoolBase.have_cars
          var  facilities = schoolBase.facilities.value
          var qualifications = schoolBase.qualifications.value
          var service = schoolBase.service.value
          var id = schoolBase.id
        }
        this.formData = {
          short_title,
          head_img,
          address,
          lat,
          lng,
          description,
          have_cars:have_cars??'',
          facilities:facilities?facilities:[],
          qualifications:qualifications?qualifications:[],
          service:service?service:[],
          id:id??''
        }
      }
    },
    //删除图片
    head_imgdel() {
      this.formData.head_img = ''
    },
    //图片上传成功
    head_imgok(imgUrl) {
      this.formData.head_img = imgUrl
    },
    //关闭弹窗
    closeDialog() {
      this.$refs['editform'].resetFields()
      //清空地图选择信息
      this.selectmapinfo = {}
      this.$emit('closeDialog')
    },
    //确认提交
    confirmbtn() {
      this.$refs['editform'].validate(async (valid) => {
        if (!valid) return
        let {
          description,
          have_cars,
          id,
          facilities,
          qualifications,
          service
        } = this.formData
        let params = {
          description,
          have_cars,
          id,
          facilities:facilities.join(','),
          qualifications:qualifications.join(','),
          service:service.join(',')
        }

        let data = await editbaseInfo(params)
        if(data.code=='0000'){
          this.$message.success('编辑成功')
           // 提交表单
          this.$emit('confirmbtn')
          this.$refs['editform'].resetFields()
        }

      })
    },
    //关闭地图
    closemap() {
      this.isshowmap = false
    },
    //选择地图 打开地图弹窗
    selectmap() {
      let mapObj = {
        address:this.formData.address,
        lat:this.formData.lat,
        lng:this.formData.lng
      }
      this.selectmapinfo = mapObj
      this.isshowmap = true
    }
  },
  components: {
    commonformdialog,
    uploadimg,
    mapDialog,
  },
  mounted() {
    this.getBaseInfoData()
    //基础设施选项
    this.facilitiesOption = getSessionStorage('Options')[20]
    //考试资质
    this.qualificationsOption = getSessionStorage('Options')[21]
    //附加服务
    this.serviceOption = getSessionStorage('Options')[22]
  },
}
</script>

<style scoped lang='scss'>
.formarea ::v-deep .carnum .el-input-group__append,
.el-input-group__prepend {
  color: #666;
}

</style>
